<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IView Slider</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
</head>
<body>
<div id="div">
    <!--    注意：非 template/render 模式下，需使用 i-button-->
    <p>按钮类型有：默认按钮、主按钮、虚线按钮、文字按钮以及四种颜色按钮。 通过设置type为primary、dashed、text、info、success、warning、error创建不同样式的按钮，不设置为默认样式</p><br/>
    <i-button>Default</i-button>
    <i-button type="primary">Primary</i-button>
    <i-button type="dashed">Dashed</i-button>
    <i-button type="text">Text</i-button>
    <br><br>
    <i-button type="info">Info</i-button>
    <i-button type="success">Success</i-button>
    <i-button type="warning">Warning</i-button>
    <i-button type="error">Error</i-button>
    <br><br>
    <p>幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上</p><br/>
    <i-button type="default" ghost>Default</i-button>
    <i-button type="primary" ghost>Primary</i-button>
    <i-button type="dashed" ghost>Dashed</i-button>
    <i-button type="text" ghost>Text</i-button>
    <i-button type="info" ghost>Info</i-button>
    <i-button type="success" ghost>Success</i-button>
    <i-button type="warning" ghost>Warning</i-button>
    <i-button type="error" ghost>Error</i-button>
</div>
<script>
    new Vue({
        el: "#div",
    })
</script>
</body>
</html>
